/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { PropType, defineComponent, ref } from 'vue';
import { useInitScheduleToolbar, useScheduleToolbarReSize } from '../../hooks';
import {
  lock,
  save,
  saveAs,
  today,
  addday,
  prevday,
  nextday,
  nextweek,
  refreesh,
  prevweek,
  nextmonth,
  reduceday,
  prevmonth,
  datepicker,
} from './svg-icon';
import { ScheduleToolbarEvent } from './schedule-toolbar-type';
import { IToolbarModel } from '../../interface';
import './schedule-toolbar.scss';

export const ScheduleToolbar = defineComponent({
  props: {
    toolarModel: {
      type: Object as PropType<IToolbarModel>,
    },
  },
  emits: ScheduleToolbarEvent,
  setup(props, { emit }) {
    // 日期选择器
    const datePickerRef = ref();

    // 工具栏
    const scheduleToolbarContentRef = ref();

    // 是否显示日期选择器
    const isShowDatePicker = ref(false);

    // 工具栏模型(默认启用所用工具栏项)
    const model: IToolbarModel = {
      save: true,
      saveAs: true,
      refreesh: true,
      jupmToNow: true,
      datePicker: true,
      prevMonth: true,
      prevWeek: true,
      prevDay: true,
      nextDay: true,
      nextWeek: true,
      nextMonth: true,
      lockDrag: true,
      hoursList: true,
      daysList: true,
      trainsStandards: true,
      startTimeList: true,
      endTimeList: true,
      scaleList: true,
    };

    if (props.toolarModel) Object.assign(model, props.toolarModel);

    const {
      hours,
      days,
      scale,
      onSave,
      onSaveAs,
      onRefresh,
      allowDrag,
      currentDay,
      onLockClick,
      onJupmToNow,
      onWeekChange,
      onDaysChange,
      onDateChange,
      scaleEndTime,
      onHoursChange,
      onScaleChange,
      onMonthChange,
      scaleStartTime,
      trainsStandards,
      onDaysClickChange,
      onScaleTimeChange,
      onScaleRangeChange,
      onDatePickerChange,
    } = useInitScheduleToolbar(emit);

    // 渲染小时列表
    const renderHoursList = (_hours: number = 24) => {
      const options = [
        { value: 4, label: '4小时' },
        { value: 2, label: '2小时' },
        { value: 1, label: '1小时' },
        { value: 0.5, label: '30分钟' },
        { value: 0.25, label: '15分钟' },
      ];
      return (
        <el-select
          style='max-width: 75px'
          v-model={hours.value}
          onChange={onHoursChange}
        >
          {options.map(item => {
            return (
              <el-option
                key={item.value}
                label={item.label}
                value={item.value}
              />
            );
          })}
        </el-select>
      );
    };

    // 渲染显示天数列表
    const renderDaysList = () => {
      const options = [
        {
          value: 1,
          label: '1天',
        },
        {
          value: 7,
          label: '7天',
        },
        {
          value: 15,
          label: '15天',
        },
        {
          value: 31,
          label: '1月',
        },
      ];
      return (
        <div class='schedule-toolbar-days'>
          <div
            class='schedule-toolbar-days-add'
            title='增加1天'
            onClick={() => onDaysClickChange(1)}
          >
            <span v-html={addday}></span>
          </div>
          <el-select
            style='max-width: 75px'
            v-model={days.value}
            onChange={onDaysChange}
          >
            {options.map(item => {
              return (
                <el-option
                  key={item.value}
                  label={item.label}
                  value={item.value}
                />
              );
            })}
          </el-select>
          <div
            class='schedule-toolbar-days-reduce'
            title='减少1天'
            onClick={() => onDaysClickChange(-1)}
          >
            <span v-html={reduceday}></span>
          </div>
        </div>
      );
    };

    // 渲染开始时间列表
    const rendertempStartTime = (min: number = 0, max: number = 23) => {
      const options = [];
      for (let i = min; i <= max; i++) {
        options.push({
          value: i,
          label: i,
        });
      }
      return (
        <el-select
          v-model={scaleStartTime.value}
          placeholder='请选择'
          style='max-width: 65px'
          onChange={onScaleTimeChange}
        >
          {options.map(item => {
            return (
              <el-option
                key={item.value}
                label={item.label}
                value={item.value}
              />
            );
          })}
        </el-select>
      );
    };

    // 渲染结束时间列表
    const rendertempEndTime = (min: number = 1, max: number = 24) => {
      const options = [];
      for (let i = min; i <= max; i++) {
        options.push({
          value: i,
          label: i,
        });
      }
      return (
        <el-select
          v-model={scaleEndTime.value}
          placeholder='请选择'
          style='max-width: 65px'
          onChange={onScaleTimeChange}
        >
          {options.map(item => {
            return (
              <el-option
                key={item.value}
                label={item.label}
                value={item.value}
              />
            );
          })}
        </el-select>
      );
    };

    // 渲染训练日标准下拉
    const renderTrainsStandards = () => {
      const options = [
        {
          value: '0,24',
          label: `0:00 - 24:00`,
        },
      ];
      return (
        <div class='schedule-toolbar-trains-standards'>
          <div>训练日标准</div>
          <el-select
            v-model={trainsStandards.value}
            placeholder='请选择'
            style='max-width: 112px'
            onChange={onScaleRangeChange}
          >
            {options.map(item => {
              return (
                <el-option
                  key={item.value}
                  label={item.label}
                  value={item.value}
                />
              );
            })}
          </el-select>
        </div>
      );
    };

    // 渲染刻度下拉
    const renderScaleList = () => {
      const options = [
        {
          value: 4,
          label: '自动',
        },
        {
          value: 12,
          label: '上下午',
        },
      ];
      return (
        <div class='schedule-toolbar-scale-list'>
          <div>刻度</div>
          <el-select
            v-model={scale.value}
            placeholder='请选择'
            style='max-width: 80px'
            onChange={onScaleChange}
          >
            {options.map(item => {
              return (
                <el-option
                  key={item.value}
                  label={item.label}
                  value={item.value}
                />
              );
            })}
          </el-select>
        </div>
      );
    };

    // 日期选择器点击
    const onDateClick = () => {
      if (datePickerRef.value && !isShowDatePicker.value) {
        datePickerRef.value.focus();
      }
    };

    // 日期选择器显示隐藏改变
    const onVisibleChange = (visible: boolean) => {
      isShowDatePicker.value = visible;
    };

    const { visibleArrow } = useScheduleToolbarReSize(
      scheduleToolbarContentRef,
    );

    const scrollToLeft = () => {
      if (scheduleToolbarContentRef.value) {
        scheduleToolbarContentRef.value.scrollLeft -=
          scheduleToolbarContentRef.value.clientWidth;
      }
    };

    const scrollToRight = () => {
      if (scheduleToolbarContentRef.value) {
        scheduleToolbarContentRef.value.scrollLeft +=
          scheduleToolbarContentRef.value.clientWidth;
      }
    };

    return {
      model,
      onSave,
      onSaveAs,
      onRefresh,
      allowDrag,
      currentDay,
      onJupmToNow,
      onLockClick,
      onDateChange,
      onWeekChange,
      visibleArrow,
      datePickerRef,
      onMonthChange,
      onDatePickerChange,
      scheduleToolbarContentRef,
      onDateClick,
      scrollToLeft,
      scrollToRight,
      renderDaysList,
      onVisibleChange,
      renderHoursList,
      renderScaleList,
      rendertempEndTime,
      rendertempStartTime,
      renderTrainsStandards,
    };
  },
  render() {
    return (
      <div class='schedule-toolbar-container'>
        <div
          class={{
            'schedule-toolbar-toleft': true,
            'is-visible': this.visibleArrow,
          }}
          onClick={this.scrollToLeft}
          title='向左滚动'
        >
          <i class='fa fa-angle-left' aria-hidden='true' />
        </div>
        <div class='schedule-toolbar-content' ref='scheduleToolbarContentRef'>
          {this.model.save && (
            <div
              class='schedule-toolbar-item is-btn'
              title='保存数据'
              onClick={this.onSave}
            >
              <span v-html={save}></span>
            </div>
          )}
          {this.model.saveAs && (
            <div
              class='schedule-toolbar-item is-btn'
              title='另存数据'
              onClick={this.onSaveAs}
            >
              <span v-html={saveAs}></span>
            </div>
          )}
          {this.model.refreesh && (
            <div
              class='schedule-toolbar-item is-btn'
              title='刷新当前视图数据'
              onClick={this.onRefresh}
            >
              <span v-html={refreesh}></span>
            </div>
          )}
          {this.model.jupmToNow && (
            <div
              class='schedule-toolbar-item is-btn'
              title='定位到今日'
              onClick={this.onJupmToNow}
            >
              <span v-html={today}></span>
            </div>
          )}
          {this.model.datePicker && (
            <div
              class='schedule-toolbar-item is-btn schedule-toolbar-date-picker-container'
              title='选择定位日期'
              onClick={this.onDateClick}
            >
              <el-date-picker
                ref='datePickerRef'
                class='schedule-toolbar-date-picker'
                v-model={this.currentDay}
                type='date'
                onChange={this.onDatePickerChange}
                onVisibleChange={this.onVisibleChange}
              />
              <span v-html={datepicker}></span>
            </div>
          )}
          {this.model.prevMonth && (
            <div
              class='schedule-toolbar-item is-btn'
              title='上一个月'
              onClick={() => this.onMonthChange(-1)}
            >
              <span v-html={prevmonth}></span>
            </div>
          )}
          {this.model.prevWeek && (
            <div
              class='schedule-toolbar-item is-btn'
              title='上一周'
              onClick={() => this.onWeekChange(-1)}
            >
              <span v-html={prevweek}></span>
            </div>
          )}
          {this.model.prevDay && (
            <div
              class='schedule-toolbar-item is-btn'
              title='上一天'
              onClick={() => this.onDateChange(-1)}
            >
              <span v-html={prevday}></span>
            </div>
          )}
          {this.model.nextDay && (
            <div
              class='schedule-toolbar-item is-btn'
              title='下一天'
              onClick={() => this.onDateChange(1)}
            >
              <span v-html={nextday}></span>
            </div>
          )}
          {this.model.nextWeek && (
            <div
              class='schedule-toolbar-item is-btn'
              title='下一周'
              onClick={() => this.onWeekChange(1)}
            >
              <span v-html={nextweek}></span>
            </div>
          )}
          {this.model.nextMonth && (
            <div
              class='schedule-toolbar-item is-btn'
              title='下一月'
              onClick={() => this.onMonthChange(1)}
            >
              <span v-html={nextmonth}></span>
            </div>
          )}
          {this.model.lockDrag && (
            <div
              class={{
                'schedule-toolbar-item is-btn': true,
                'is-lock': !this.allowDrag,
              }}
              title='锁定拖动'
              onClick={this.onLockClick}
            >
              <span v-html={lock}></span>
            </div>
          )}
          {this.model.hoursList && (
            <div class='schedule-toolbar-item' title='小时列表'>
              {this.renderHoursList()}
            </div>
          )}
          {this.model.daysList && (
            <div class='schedule-toolbar-item' title='显示天数'>
              {this.renderDaysList()}
            </div>
          )}
          {this.model.trainsStandards && (
            <div class='schedule-toolbar-item'>
              {this.renderTrainsStandards()}
            </div>
          )}
          {this.model.startTimeList && (
            <div class='schedule-toolbar-item'>
              {this.rendertempStartTime()}
            </div>
          )}
          {this.model.endTimeList && (
            <div class='schedule-toolbar-item'>{this.rendertempEndTime()}</div>
          )}
          {this.model.scaleList && (
            <div class='schedule-toolbar-item'>{this.renderScaleList()}</div>
          )}
        </div>
        <div
          class={{
            'schedule-toolbar-toright': true,
            'is-visible': this.visibleArrow,
          }}
          onClick={this.scrollToRight}
          title='向右滚动'
        >
          <i class='fa fa-angle-right' aria-hidden='true' />
        </div>
      </div>
    );
  },
});
